<template>

    <div style="width:800px;margin:0 auto;">
        <div>
            <span>商品主信息</span>
            <el-row>
                <el-col :span="3" style="text-align:left;">
                    <span>商品信息信息</span>
                </el-col>
                <el-col :span="21">
                    <el-row>
                        <el-col :span="5">商品名称</el-col>
                        <el-col :span="17"><el-input size="mini"/></el-col>
                    </el-row>
                    <el-row style="margin-top:10px;">
                        <el-col :span="5">商品类别</el-col>
                        <el-col :span="17"><el-input size="mini"/></el-col>
                    </el-row>
                </el-col>
            </el-row>
        </div>
        <div style="margin-top:30px;">
            <span>商品规格信息</span>
            <div>
                <el-row>
                    <el-col :span="2" style="text-align:left;">
                        <span>规格信息</span>
                    </el-col>
                    <el-col :span="22">
                        <el-row>
                            <el-col :span="5">颜色</el-col>
                            <el-col :span="17">
                                <el-tag :key="tag" v-for="tag in colorTags" closable :disable-transitions="false"
                                    @close="handleColorClose(tag)">
                                    {{ tag }}
                                </el-tag>
                                <el-input class="input-new-tag" v-if="colorInputVisible" v-model="colorInputValue"
                                    ref="saveTagInput" size="small" @keyup.enter.native="handleColorInputConfirm"
                                    @blur="handleColorInputConfirm">
                                </el-input>
                                <el-button v-else class="button-new-tag" size="small" @click="eventColorAddInput">+ 添加
                                    颜色</el-button>
                            </el-col>
                        </el-row>

                        <el-row style="margin-top:20px;">
                            <el-col :span="5">尺寸</el-col>
                            <el-col :span="17">
                                <el-tag :key="tag" v-for="tag in sizeTags" closable :disable-transitions="false"
                                    @close="handleSizeClose(tag)">
                                    {{ tag }}
                                </el-tag>
                                <el-input class="input-new-tag" v-if="sizeInputVisible" v-model="sizeInputValue"
                                    ref="saveTagInput" size="small" @keyup.enter.native="handleSizeInputConfirm"
                                    @blur="handleSizeInputConfirm">
                                </el-input>
                                <el-button v-else class="button-new-tag" size="small" @click="eventSizeAddInput">+ 添加
                                    尺寸</el-button>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </div>
            <div>
                <el-row>
                    <el-col :span="12" style="text-align:left;">
                        <span>商品规格信息</span>
                    </el-col>
                    <el-col :span="12" style="text-align:right;">
                        <el-button size="mini" type="info" @click="eventAddSpecs">添加规格</el-button>
                    </el-col>
                </el-row>

                <el-table :data="tableData" style="width: 100%">
                    <el-table-column label="颜色">
                        <template slot-scope="scope">
                            {{ scope.row.color }}
                        </template>
                    </el-table-column>
                    <el-table-column label="尺寸" width="180">
                        <template slot-scope="scope">
                            {{ scope.row.size }}
                        </template>
                    </el-table-column>
                    <el-table-column label="市场价" width="180">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.sale" size="mini" />
                        </template>
                    </el-table-column>
                    <el-table-column label="零售价" width="180">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.market" size="mini" />
                        </template>
                    </el-table-column>
                    <el-table-column label="可售库存" width="180">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.stock" size="mini" />
                        </template>
                    </el-table-column>
                    
                    <el-table-column label="可售库存" width="180">
                        <template >
                            <el-button>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </div>
        </div>
        <div style="margin-top:30px;">商品图片</div>

    </div>
</template>


<script>
export default {
    data() {
        return {
            colorTags: ['红色', '黑色', '白色'],
            colorInputVisible: false,
            colorInputValue: '',

            sizeTags: ['S', 'M', 'L'],
            sizeInputVisible: false,
            sizeInputValue: '',
            tableData: [{ color: '', size: '', sale: '', market: '', stock: '' }]
        }
    },
    methods: {

        //颜色标签管理
        handleColorClose(tag) {
            this.colorTags.splice(this.colorTags.indexOf(tag), 1);
        },

        eventColorAddInput() {
            this.colorInputVisible = true;
            this.$nextTick(_ => {
                console.log(_)
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },

        handleColorInputConfirm() {
            let inputValue = this.colorInputValue;
            if (inputValue) {
                this.colorTags.push(inputValue);
            }
            this.colorInputVisible = false;
            this.colorInputValue = '';
        },

        //尺寸管理
        handleSizeClose(tag) {
            this.sizeTags.splice(this.sizeTags.indexOf(tag), 1);
        },

        eventSizeAddInput() {
            this.sizeInputVisible = true;
            this.$nextTick(_ => {
                console.log(_)
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },

        handleSizeInputConfirm() {
            let inputValue = this.sizeInputValue;
            if (inputValue) {
                this.sizeTags.push(inputValue);
            }
            this.sizeInputVisible = false;
            this.sizeInputValue = '';
        },

        //添加表行
        eventAddSpecs() {

            this.tableData.push({ color: '红色', size: 'L', sale: '', market: '', stock: '' })
        }
    }
}
</script>

<style>
.el-tag+.el-tag {
    margin-left: 10px;
}

.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}
</style>